<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sq="http://www.w3.org/1999/html">
<head>
  <th:block th:include="include :: header" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
  <div class="row">
    <div class="col-sm-3">
      <div class="ibox float-e-margins">
        <div class="ibox-content mailbox-content">
          <div class="file-manager">
            <a class="btn btn-block btn-primary compose-mail" href="#" onclick="addMenu()">
              新增菜单
            </a>
            <div class="space-25"></div>
            <ul id="tree" class="ztree" style="width:auto;overflow:auto"></ul>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-9 animated fadeInRight">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>编辑</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <form class="form-horizontal m-t" id="editFrom" method="post">
            <div class="form-group">
              <label class="col-sm-3 control-label">名称：</label>
              <div class="col-sm-8">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="resLevel" name="resLevel" value="1">
                <input id="name" name="name" minlength="2" type="text" class="form-control" required=""
                       aria-required="true">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">父节点：</label>
              <div class="col-sm-8">
                <input type="hidden" id="parentId" name="parentId" value="0" class="form-control">
                <input type="text" id="parentName" name="parentName" value="root" class="form-control"
                       disabled="disabled">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">类型：</label>
              <div class="col-sm-8">
                <sq:select id="type" name="type" dicCode="1003" required pleaseChoose="菜单类型"/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">链接：</label>
              <div class="col-sm-8">
                <input id="url" name="url" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">图标：</label>
              <div class="col-sm-8">
                <sq:select name="icon" dicCode="1004" pleaseChoose="图标"/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">排序：</label>
              <div class="col-sm-8">
                <input id="orderNum" name="orderNum" type="num" maxlength="2" class="form-control" placeholder="最多两位数字">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">状态：</label>
              <div class="col-sm-8">
                <sq:select name="status" dicCode="1001" value="100101" required="true" pleaseChoose="状态"/>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-4 col-sm-offset-3" id="b">
                <button class="btn btn-primary" type="button" onclick="saveData()">
                  提交
                </button>
                <button class="btn btn-danger" type="button" onclick="del()">
                  删除
                </button>
                <!--<button class="btn btn-outline btn-default" type="button" onclick="javascript:history.go(0)">
                  返回
                </button>-->
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<th:block th:include="include :: footer" />

<script th:inline="javascript">
    const requestPath = parent.api.sys.menu
    $(function () {
        //屏蔽删除按钮
        $(".btn-danger").hide()
        //树形结构
        initTree()
        //表单提交路径
        $("#editFrom").attr("action", requestPath.save)
        //初始化复选框样式
        $(".i-checks").iCheck({
            checkboxClass:"icheckbox_square-green",
            radioClass:"iradio_square-green"
        })
    })
    //初始化树结构
    function initTree() {
        let setting = {
            check: {
                enable: false,
                chkStyle: "radio",
                radioType: "all"
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: ""
                }
            },
            callback: {
                onClick: zTreeOnClick
            }
        }
        $.fn.zTree.init($("#tree"), setting, [[${treeList}]])
    }

    //获取点击菜单信息
    function zTreeOnClick(event, treeId, treeNode) {
        $.ajax({
            type: "get",
            url: requestPath.index+'/'+treeNode.id,
            data: '',
            dataType: "json",
            success: function (data) {
                if (data && data.success === true) {
                    loadData(data.info, treeNode.getParentNode())
                } else {
                    //TODO 弹出错误信息
                }
            }
        })
    }
    //加载菜单数据
    function loadData(data,pNode){
        $("#id").val(data.id)
        $("#name").val(data.name)
        $("#parentId").val(data.parentId)
        if(pNode == null || pNode == ""){
            $("#parentName").val("root")
        }else{
            $("#parentName").val(pNode.name)
        }
        $("#type").val(data.type)
        $("#url").val(data.url)
        $("#icon").val(data.icon)
        $("#orderNum").val(data.orderNum)
        $("#status").val(data.status)
        $(".btn-danger").show()//显示删除按钮
    }

    //新增菜单
    function addMenu(){
        var treeObj = $.fn.zTree.getZTreeObj("tree")
        var nodes = treeObj.getSelectedNodes()
        $('#editFrom')[0].reset()
        $("#id").val("")
        $(".btn-danger").hide()
        if(nodes == null || nodes == ""){
            $("#parentId").val("0")
            $("#parentName").val("root")
            $("#resLevel").val("1")
        }else{
            if(nodes[0].level == 2){
                swal("系统只支持三级菜单！")
            }else{
                $("#parentId").val(nodes[0].id)
                $("#parentName").val(nodes[0].name)
            }
        }
    }

    //保存
    function saveData(){
        if($("#editFrom").valid()){
            swal({
                title:"保存成功!",
                showCancelButton:false,
                confirmButtonText:"确定",
                closeOnConfirm:false})
            setTimeout(function(){
                $("#editFrom").submit()
            },1000)
        }
    }

    //删除
    function del(){
        swal({
                title:"您确定要删除这条信息吗",
                text:"删除后将无法恢复,请谨慎操作!",
                type:"warning",
                showCancelButton:true,
                confirmButtonColor:"#DD6B55",
                confirmButtonText:"删除",
                cancelButtonText:"取消",
                closeOnConfirm:false},
            function(){
                $.ajax({
                    type: "get",
                    url: requestPath.del,
                    data: "id="+$("#id").val(),
                    dataType:"json",
                    success:function(data){
                        if (data.success) {
                            swal({
                                title: "删除成功!",
                                showCancelButton: false,
                                confirmButtonText: "确定",
                                closeOnConfirm: false
                            })
                            setTimeout(function () {
                                $("#editFrom")[0].reset()
                                window.location.reload()
                            }, 1000)
                        } else {
                            swal({
                                title: data.message,
                                showCancelButton: false,
                                confirmButtonText: "确定",
                                closeOnConfirm: false
                            })
                        }
                    }
                })
            }
        )
    }

</script>
</body>
</html>